<template>
<div>
  <h2 style="margin-top: 20px">设备维护知识库维护</h2>
  <el-card shadow="hover" style="margin-top: 50px; margin-left: 10%; width: 80%; min-height: 300px">
    <el-form  :model="formInline" :rules="rules" class="demo-form-inline" label-width="40%" ref="formInline" style="margin-right: 30%;">
      <el-form-item label="故障总成" prop="part">
        <el-input v-model="formInline.part" placeholder="请输入总成"></el-input>
      </el-form-item>
      <el-form-item label="故障现象" prop="phenomenon">
        <el-input v-model="formInline.phenomenon" placeholder="请输入故障现象"></el-input>
      </el-form-item>
      <el-form-item label="故障位置" prop="location">
        <el-input v-model="formInline.location" placeholder="请输入故障位置"></el-input>
      </el-form-item>
      <el-form-item label="故障原因" prop="cause">
        <el-input v-model="formInline.cause" placeholder="请输入故障原因"></el-input>
      </el-form-item>
      <el-form-item label="维修材料" prop="material">
        <el-input v-model="formInline.material" placeholder="请输入维修物料"></el-input>
      </el-form-item>
      <el-form-item label="维修方案" prop="method">
        <el-input v-model="formInline.method" placeholder="请输入维修方案"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
        <el-button @click="clearForm">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

</div>
</template>

<script>
import axios from "axios";
export default {
  name: "add",
  data(){
    return{
      formInline:{
        part:'',
        phenomenon:'',
        location:'',
        cause:'',
        material:'',
        method:''
      },
      rules:{
        part: [{required: true, message: '请输入故障总成', trigger: 'blur'}],
        phenomenon: [{required: true, message: '请输入故障现象', trigger: 'blur'}],
        location: [{required: false, trigger:'blur'}],
        cause: [{required: true, message:'请输入故障原因', trigger: 'blur'}],
        material: [{required: false, trigger: 'blur'}],
        method: [{required: false, trigger:'blur'}]
      }
    }
  },
  methods:{
    onSubmit() {
      let formData = new FormData()
      formData.append('part', this.formInline.part)
      formData.append('phenomenon', this.formInline.phenomenon)
      formData.append('location', this.formInline.location)
      formData.append('cause', this.formInline.cause)
      formData.append('material', this.formInline.material)
      formData.append('method', this.formInline.method)
      this.$refs.formInline.validate( async (valid) => {
        if (valid) {
          // alert('submit!');
          console.log(this.formInline)
          await axios.post('http://127.0.0.1:5000/add_part', formData).then(function (res){
            if(res.status==200){

              alert("success")
              // message({
              //   message:'添加成功',
              //   type:"success"
              // })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      this.clearData()
      this.$router.push({name: 'AddBack'})
    },
    clearForm(){
      this.$refs.formInline.resetFields()
    },
    clearData(){
      this.formInline.part = ''
      this.formInline.phenomenon = ''
      this.formInline.location = ''
      this.formInline.cause = ''
      this.formInline.material = ''
      this.formInline.method = ''
    }
  }
}
</script>

<style scoped>

</style>